<template>
	<view class="main">
		<shop-nav title="我的空间"></shop-nav>
		<view class="content" :style="'min-height: calc( 100vh - '+ safeAreaInsetHeight +'px )' ">
			<view style="height: 100%;" v-if="!tableLoad">
				<view class="list pdb-10" v-if="addrs.length != 0 ">
					<!-- 列表数据 -->
					<view class="list-item mrt-20" v-for="(item,index) in addrs" :key="index">
						<view class="user-information row">
							<view class="col-xl-4">
								{{item.name}}
							</view>
							<view class="col-xl-4">
								<text class="phone">{{item.phone}}</text>
							</view>
							<view class="col-xl-4">
								<view class="flex" v-if="item.default">
									<u-icon name="map-fill" color="#4bb676" size="18"></u-icon><text
										class="address">默认地址</text>
								</view>
								<view class="flex" v-else>
									<u-icon name="map-fill" color="#d0d0d0" size="18"></u-icon><text
										class="address">默认地址</text>
								</view>
							</view>
						</view>
						<view class="user-address">
							<text>
								{{item.address}}
							</text>
						</view>
						<view class="operation">
							<view class="fl pdb-10 flex">
								<view class="btns" style="width: 200rpx;" v-if="!item.default">
									<u-button type="warning" text="设为默认" :plain="true" size="small"
										@click="trueDefault(item.id)"></u-button>
								</view>
								<view class="btns" style="width: 200rpx;">
									<u-button type="primary" text="编辑地址" :plain="true" size="small"
										@click="openEdit(item.id)"></u-button>
								</view>
								<view class="btns" style="width: 40rpx;">
									<u-button type="info" icon="trash" :plain="true" :hairline="true" size="small"
										@click="clear(item)"></u-button>
								</view>
							</view>
							<view style="clear: both;">
							</view>
						</view>
					</view>
				</view>
				<view class="empty" v-else>
					<view class="prompt">
						<view class="logo">
							<img src="http://cdn.uviewui.com/uview/empty/address.png">
						</view>
						<text>暂无收货地址</text>
					</view>
				</view>

				<view class="add-btn" :style="'bottom:'+  (safeAreaBottomHeight + 15) + 'px'" @click="openEdit(null)">
					新增
				</view>
			</view>
			<view style="height: 100%;" v-else>
				<view class="empty">
					<view class="prompt">
						<text>正在加载中...</text>
					</view>
				</view>
			</view>
		</view>




		<!-- 弹出窗 -->
		<u-popup :show="show" @close="close" @open="open" mode="center" :round="10">
			<view class="pop-main">
				<view class="form">
					<!-- 每行 -->
					<view class="form-item">
						<!-- 标题 -->
						<view class="form-label">
							名字
						</view>
						<!-- 身体 -->
						<view class="form-body">
							<u--input border="surround" v-model="addrForm.name"></u--input>
						</view>
					</view>
					<!-- 每行 -->
					<view class="form-item">
						<!-- 标题 -->
						<view class="form-label">
							电话
						</view>
						<!-- 身体 -->
						<view class="form-body">
							<u--input border="surround" v-model="addrForm.phone"></u--input>
						</view>
					</view>
					<!-- 每行 -->
					<view class="form-item">
						<!-- 标题 -->
						<view class="form-label">
							地址
						</view>
						<!-- 身体 -->
						<view class="form-body">
							<u--textarea border="surround" v-model="addrForm.address"></u--textarea>
						</view>
					</view>
					<view class="form-item">
						<!-- 身体 -->
						<view class="form-btn">
							<u-button type="primary" :plain="true" text="确定" @click="save"></u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>


		<shop-bar :current="3"></shop-bar>
	</view>
</template>

<script>
	import { getNavIconDistance, getBarIconDistance } from '@/utils/utils.js';
	export default {
		data() {
			return {
				show: false,
				// 安全区高度获取
				safeAreaInsetHeight: 0,
				safeAreaBottomHeight: 0,
				tableLoad: true,
				addrs: [],
				// 表单
				addrForm: {}
			}
		},
		methods: {
			trueDefault(id) {
				console.log(id + "设为默认");
			},
			// 获取宽度高度
			getTopIconDistance() {
				this.safeAreaInsetHeight = 0;
				this.safeAreaBottomHeight = 0;
				this.safeAreaInsetHeight += getNavIconDistance() + 10;
				this.safeAreaBottomHeight = getBarIconDistance() + 50 + 10;
				this.safeAreaInsetHeight += this.safeAreaBottomHeight;
			},
			getAddrs() {
				this.tableLoad = true;
				setTimeout(() => {
					this.addrs = [{
							id: 176,
							name: '张三',
							phone: '13100001234',
							address: '福建省福州市仓山区大榕树创业园二楼传一卓跃教室5 和 福建省福州市仓山区大榕树创业园二楼传一卓跃教室1',
							postal: '35530',
							default: true,
						},
						{
							id: 175,
							name: '李四',
							phone: '13100005678',
							address: '福建省福州市仓山区大榕树创业园二楼传一卓跃教室五',
							postal: '35530',
							default: false,
						}
					]
					this.tableLoad = false;
				}, 1000)
			},
			openEdit(id) {
				if (id) {
					console.log("打开" + id);
					this.addrForm.id = id;
					this.show = true;
				} else {
					console.log("新增");
					this.show = true;
				}
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				this.addrForm = {}
				// console.log('close');
			},
			clear(address) {
				console.log("删除" + address.address);
			},
			save() {
				if (this.addrForm.id) {
					console.log("修改");
				} else {
					console.log("添加");
				}
			}
		},
		created() {
			this.getTopIconDistance();
			this.getAddrs();
		}
	}
</script>

<style scoped lang="scss">
	.empty {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		/* background: red; */

		.prompt {
			text-align: center;

			text {
				font-size: var(--font-size-default);
				color: var(--text-light);
			}
		}
	}

	.list {
		.list-item {
			padding: 5rpx;
			padding: 0 20rpx;
			background: var(--white);
			box-sizing: border-box;
			border: 1px solid rgba(236, 236, 236, 0.4);

			.user-information {
				border-bottom: 1px solid #ececec;
				// text-align: center;
				padding: 18rpx 0;

				.phone {
					color: var(--text-blue);
				}

				.address {
					padding-left: 10rpx;
				}
			}

			.user-address {
				padding: 20rpx 0;
				line-height: 2em;
				min-height: 40px;
				color: var(--text-light);
				font-size: var(--font-size-medium);
			}
		}

		.btns {
			margin-right: 10px;
		}
	}


	.add-btn {
		width: 65px;
		height: 65px;
		background-color: var(--text-blue);
		border-radius: 50%;
		position: fixed;
		right: 5rpx;
		text-align: center;
		line-height: 65px;
		color: var(--white);
		font-size: var(--font-size-large);
	}

	.pop-main {
		// height: 300px;
		width: 340px;
		background: var(--white);
		box-sizing: border-box;
		padding: 15rpx;

		// 编写表格样式
		.form {
			padding: 3px;

			// 表格每一列
			.form-item {
				// label
				display: flex;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
				margin: 10px -5px;

				.form-label {
					flex: 0 0 20%;
					max-width: 20%;
					box-sizing: border-box;
					position: relative;
					width: 100%;
					min-height: 1px;
					padding-right: 5px;
					padding-left: 5px;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.form-body {
					flex: 0 0 80%;
					max-width: 80%;
					box-sizing: border-box;
					position: relative;
					width: 100%;
					min-height: 1px;
					padding-right: 5px;
					padding-left: 5px;
				}


				.form-btn {
					flex: 0 0 100%;
					max-width: 100%;
					box-sizing: border-box;
					position: relative;
					width: 100%;
					min-height: 1px;
					padding-right: 5px;
					padding-left: 5px;
				}
			}
		}
	}
</style>